var WorkshopSelect = function () {
  var template = /* html */ `
    <el-select clearable filterable :size="size" v-model="workshop" :loading="loading" value-key="id" @visible-change="resetOption"
      @change="handleChange">
      <el-option v-for="item in workshopList" :key="'ws_'+item.id" :value="item" :label="item.name" :disabled="item.disabled">
        <span style="float: left">{{item.name}}</span>
        <span style="float: right">{{item.stockCount}}</span>
      </el-option>
    </el-select>
  `;

  return {
    props: {
      value: {
        type: Object,
        required: true
      },
      order: {
        type: Object,
        required: true
      },
      size: String
    },

    watch: {
      value: function () {
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }

        this.workshop = this.getWorkShop();
      },

      'order.actualFeedCount': function (val) {
        if (val === undefined) {
          return;
        }

        var workshop = this.workshop;
        if (workshop === '') {
          return;
        }

        var stockCount = workshop.stockCount;
        if (val > stockCount) {
          this.workshop = '';
          this.inputValue = null;
          this.$emit('input', null);
        }
      }
    },

    data: function () {
      return {
        loading: false,
        workshop: this.getWorkShop(),
        workshopList: [],
        inputValue: null
      };
    },

    methods: {
      getWorkShop: function () {
        var value = this.value;
        if (value === null) {
          value = '';
        }
        return value;
      },

      resetOption: function (isShow) {
        if (!isShow) {
          this.loading = false;
          return;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('issueNote/getWorkShopMaterialCount', {
          materialCode: this.order.materialCode
        }).then(function (workshopList) {
          if (!self.loading) {
            return;
          }

          var actualFeedCount = self.order.actualFeedCount;
          workshopList = _.map(workshopList, function (workshop) {
            var stockCount = workshop.stockCount;
            return {
              id: workshop.workShopId,
              name: workshop.workShopName,
              stockCount: stockCount,
              disabled: stockCount < actualFeedCount
            };
          });

          var workshop = self.workshop;
          if (workshop !== '') {
            var obj = _.find(workshopList, {
              id: workshop.id
            });
            if (obj === undefined) {
              self.workshop = '';
              self.inputValue = null;
              self.$emit('input', null);
            }
          }

          self.workshopList = workshopList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      handleChange: function () {
        var workshop = this.workshop;
        if (workshop === '') {
          workshop = null;
        }

        this.inputValue = workshop;
        this.$emit('input', workshop);
        this.$emit('change', workshop);
      }
    },

    template: template
  };
}();
